import Taro from '@tarojs/taro';
import { View, Image, Text } from '@tarojs/components';
import { AtButton } from 'taro-ui';

import './style.scss';

/**
 * 我的活动
 * @returns
 */
const ActivityItem = ({ data }) => {
  return (
    <View
      className="activity-item-wrap"
      onClick={() => {
        Taro.navigateTo({
          url: `/subPages/myActivity/detail/index?topic_id=${data.topic_id || data.id}`,
        });
      }}
    >
      <Image mode="aspectFit" src={data.topic_pic_url || data.pic_url} />
      <View className="item-right">
        <View className="activity-title">
          <Text className="store-count">{data.store_count}门店参与</Text>
          <Text className="title">{data.topic_title || data.title}</Text>
        </View>
        {/* <Text className="time">
          活动时间：
          {data.topic_activity_start_time?.split(' ')[0] || data.activity_start_time?.split(' ')[0]}
        </Text> */}
        <View className="item-bottom">
          <Text className="shop-count">
            活动开始时间：{data.topic_activity_start_time || data.activity_start_time}
          </Text>
          <Text className="user-count">{data.join_count}人报名</Text>
        </View>
        {data.status === 1 ? (
          <AtButton className="btn-unstart" circle>
            活动进行中
          </AtButton>
        ) : data.status === 2 ? (
          <AtButton className="btn-end" circle>
            活动已结束
          </AtButton>
        ) : (
          <AtButton className="btn-end" circle>
            活动未开始
          </AtButton>
        )}
      </View>
    </View>
  );
};
export default ActivityItem;
